<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as THREE from "three";
import VantaFog from 'vanta/src/vanta.fog'

export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = VantaFog({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.FOG({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      highlightColor: 0x009DFF,
      midtoneColor:0x00D2F9,
      lowlightColor:0x62FBD4
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};

</script>

<style lang="less" scoped>

</style>

